<template>
  <div class="app-container">
    <el-row style="padding: 0 10px" :gutter="20">
      <el-row :gutter="20">
        <!--        <el-col :span="16" :xs="24" :sm="24" :md="16" :lg="16">-->
        <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="box-card">
            <el-row :gutter="20" class="card">
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <el-button
                    class="btn-size"
                    type="primary"
                    icon="el-icon-message icon"
                    circle
                  ></el-button>
                  <p>{{ info.emailCount }}</p>
                  <p>{{ $t('customer.sentEmailMarketing') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <el-button
                    class="btn-size"
                    type="danger"
                    icon="el-icon-document-copy icon"
                    circle
                  ></el-button>
                  <p>140</p>
                  <p>{{ $t('customer.read') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <el-button
                    class="btn-size"
                    type="success"
                    icon="el-icon-user icon"
                    circle
                  ></el-button>
                  <p>{{ info.customerCount }}</p>
                  <p>{{ $t('customer.customerCount') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <el-button
                    class="btn-size"
                    type="warning"
                    icon="el-icon-shopping-bag-2 icon"
                    circle
                  ></el-button>
                  <p>{{ info.dealCustomerCount }}</p>
                  <p>{{ $t('customer.dealCustomer') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <el-button
                    class="btn-size"
                    type="info"
                    icon="el-icon-receiving icon"
                    circle
                  ></el-button>
                  <p>{{ info.waterCustomerCount }}</p>
                  <p>{{ $t('customer.waterCustomerInWeeks') }}</p>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
    <el-row
      style="padding: 0 10px; margin-top: 10px"
      :gutter="20"
      class="follow"
    >
      <el-row :gutter="20">
        <!--        <el-col :span="16" :xs="24" :sm="24" :md="16" :lg="16">-->
        <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t('customer.followDetail') }}</span>
            </div>
            <el-row :gutter="20" class="card">
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <p class="num">{{ info.sevenDaysNotFollow }}</p>
                  <p>{{ $t('customer.notFollowedInWeek') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <p class="num">{{ info.fifteenDaysNotFollow }}</p>
                  <p>{{ $t('customer.notFollowedInHalfMonth') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <p class="num">{{ info.oneMontNotFollow }}</p>
                  <p>{{ $t('customer.notFollowedInMonth') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <p class="num">{{ info.oneYearNotFollow }}</p>
                  <p>{{ $t('customer.notFollowedInYear') }}</p>
                </el-card>
              </el-col>
              <el-col
                :span="4"
                :push="1"
                :xs="{ span: 24, push: 0 }"
                :sm="{ span: 12, push: 0 }"
                :md="{ span: 4, push: 1 }"
                :lg="{ span: 4, push: 1 }"
              >
                <el-card shadow="never" align="center">
                  <p class="num">{{ info.longTimeNotFollow }}</p>
                  <p>{{ $t('customer.notFollowedUponYear') }}</p>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { Init } from '@/api/customer/home'

export default {
  name: 'index',
  data() {
    return {
      infoLoading: true,
      info: {
        emailCount: 0,
        customerCount: 0,
        dealCustomerCount: 0,
        fifteenDaysNotFollow: 0,
        oneMontNotFollow: 0,
        oneYearNotFollow: 0,
        sevenDaysNotFollow: 0,
        waterCustomerCount: 0,
        longTimeNotFollow: 0,
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await Init()
        .then((res) => {
          this.info = res.data
          setTimeout(() => {
            this.infoLoading = false
          }, 0.5 * 1000)
        })
        .catch(() => {})
    },
  },
}
</script>

<style scoped>
.app-container {
  background: unset !important;
}
.num {
  color: #304156;
  font-weight: bold;
  font-size: 20px;
  line-height: 25px;
}
.follow /deep/ .el-card__header {
  border: unset !important;
}
.btn-size {
  width: 60px;
  height: 60px;
}

.btn-size /deep/ .icon {
  font-size: 30px;
}

.card /deep/ .el-card {
  border: unset !important;
}

@media screen and (max-width: 768px) {
  .right-item {
    margin: 5px 0;
  }
}

@media screen and (max-width: 992px) {
  .right-item {
    margin: 5px 0;
  }
}

@media screen and (max-width: 1200px) {
  .right-item {
    margin: 5px 0;
  }
}
</style>
